<script setup lang="ts">
import { gethospitalInfo } from '@/api/hospital';
import { useCounterStore } from '@/stores/counter';
import { useRouter } from 'vue-router';
import { onMounted, ref } from 'vue';
import type { Ref } from 'vue';
interface IList {
    id: number,
    kinds: string,
    grade: string,
    name: string,
    image: string,
    desc: string,
    flag: boolean
}
const list: Ref<IList[]> = ref([])
const list1: Ref<IList[]> = ref([])

onMounted(() => {
    gethospitalInfo().then(res => {
        list.value = res.data.data
        list1.value = list.value.filter(item => item.flag === true)
    })
})

const use =useCounterStore()
const router = useRouter()
function getHospital(id:number){
    use.gethospitalInfo(id)
    router.push('/hospitalinfo')
}
</script>

<template>
    <div class="context">
        <van-card 
            v-for="value in list1" 
            :key="value.id" :desc="value.desc" 
            :title="value.name" 
            :thumb="value.image" 
            @click="getHospital(value.id)"
            />
    </div>
</template>
